<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iyoahs-site</title>
    
    <style>
        @font-face {
            font-family: "Press Start 2P for English";
            src: url("font/PressStart2P-Regular.ttf");
        }

        @font-face {
            font-family: "IPix-Chinese";
            src: url("font/IPix-Chinese.ttf");
        }

        :root {
            --color-background-1: rgb(188, 225, 237);
            --color-background-2: rgb(16, 88, 197);
        }

        * {
            padding: 0;
            margin: 0;
            font-family: "Press Start 2P for English";
            font-weight: 400;
            font-style: normal;
        }

        body {
            overflow: hidden;
            background: rgb(255, 255, 255);
            background-size: cover; 
            background-position: center;
            height: 100vh;
            width: 100vw;
            transition: all 2s;
        }
    </style>

    <link rel="stylesheet" href="style/index-left-slider.css">
    <link rel="stylesheet" href="style/index-music-contact.css">
    <link rel="stylesheet" href="style/index-hidden-box.css">
    <link rel="stylesheet" href="style/index-title-name.css">
    <link rel="stylesheet" href="style/index-message-box.css">
</head>
<body">
    <div class="shell">
        <div class="item active item1">
            <div class="box" >
                <div class="mini-box">
                    <div class="title">
                        <span class="title-content">图片集锦:</span>
                    </div>
                    <div class="content-body">
                        <div class="two-lins leave_message">
                            <div class="left">
                                <div class="en-text-box">
                                    <div class="rotate-text">
                                        IMAGE
                                    </div>
                                </div>
                                <div class="left-right-box">
                                    <div class="zh-text-box">
                                        <h1>图片集锦</h1>
                                        <h3>每一张都值得成为壁纸</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="right-top">
                                    <img src="pic/image.png">
                                </div>
                                <div class="right-bottom" onclick="goToImageHtml()">
                                    <p>MORE&gt;</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="choice">
                        <div class="choice-box" onclick="gotoNext()">
                            <p2>NEXT</p2>
                        </div>
            
                        <div class="choice-box" onclick="gotoPrev()">
                            <p2>PREV</p2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item next item2">
            <div class="box" >
                <div class="mini-box">
                    <div class="title">
                        <span class="title-content">动画推荐:</span>
                    </div>
                    <div class="content-body">
                        <div class="two-lins leave_message">
                            <div class="left">
                                <div class="en-text-box">
                                    <div class="rotate-text">
                                        ANIME
                                    </div>
                                </div>
                                <div class="left-right-box">
                                    <div class="zh-text-box">
                                        <h1>动画推荐</h1>
                                        <h3>好的剧情、作画值得品味</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="right-top">
                                    <img src="pic/anime.png">
                                </div>
                                <div class="right-bottom" onclick="goToAnimeHtml()">
                                    <p>MORE&gt;</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="choice">
                        <div class="choice-box" onclick="gotoNext()">
                            <p2>NEXT</p2>
                        </div>
            
                        <div class="choice-box" onclick="gotoPrev()">
                            <p2>PREV</p2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item item3">
            <div class="box" >
                <div class="mini-box">
                    <div class="title">
                        <span class="title-content">音乐推荐:</span>
                    </div>
                    <div class="content-body">
                        <div class="two-lins leave_message">
                            <div class="left">
                                <div class="en-text-box">
                                    <div class="rotate-text">
                                        MUSIC
                                    </div>
                                </div>
                                <div class="left-right-box">
                                    <div class="zh-text-box">
                                        <h1>音乐推荐</h1>
                                        <h3>听一首歌，放松一下心情</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="right-top">
                                    <img src="pic/music.png">
                                </div>
                                <div class="right-bottom" onclick="goToMusicHtml()">
                                    <p>MORE&gt;</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="choice">
                        <div class="choice-box" onclick="gotoNext()">
                            <p2>NEXT</p2>
                        </div>
            
                        <div class="choice-box" onclick="gotoPrev()">
                            <p2>PREV</p2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item prev item4">
            <div class="box" >
                <div class="mini-box">
                    <div class="title">
                        <span class="title-content">关于本站:</span>
                    </div>
                    <div class="content-body">
                        <div class="two-lins leave_message">
                            <div class="left">
                                <div class="en-text-box">
                                    <div class="rotate-text">
                                        ABOUT
                                    </div>
                                </div>
                                <div class="left-right-box">
                                    <div class="zh-text-box">
                                        <h1>关于本站</h1>
                                        <h3>开发、设计、灵感</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="right">
                                <div class="right-top">
                                    <img src="pic/about.png">
                                </div>
                                <div class="right-bottom" onclick="goToAboutHtml()">
                                    <p>MORE&gt;</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="choice">
                        <div class="choice-box" onclick="gotoNext()">
                            <p2>NEXT</p2>
                        </div>
            
                        <div class="choice-box" onclick="gotoPrev()">
                            <p2>PREV</p2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>  
    
    <div class="music-and-contact">
        <div class="icon-boxs music-switch">
           <img src="pic/music_close.png" class="icons music-icon" onclick="controlMusic()">
        </div>
        <div class="icon-boxs wechat">
            <img src="pic/wechat.png" class="icons" onclick="open_wechat_pic()">
        </div>
        <div class="icon-boxs QQ">
            <img src="pic/QQ.png"  class="icons" onclick="open_QQ_pic()">
        </div>
    </div>

    <div class="iyoahs">
        <div class="title-iyoahs">
            <h2 class="type-writing">iyoahs</h2>
        </div>

        <div class="intro-iyoahs">
            <p>公告栏:</p>
            <p>————————————————</p>
            <p>欢迎来到我的世界，在这里</p>
            <p>你可以点击下方的留言框给我留言</p>
            <p>也可以点开个人介绍框了解我</p>
            <p>大可放心，这一切都是匿名的</p>
            <p>同时可以点击左侧的prev和next</p>
            <p>切换不同的主题并解锁更多有趣的内容</p>
            <p>更多彩蛋期待你的探索！！！</p>
            <p>作者：邵艺(iyoahs)</p>
            <p>————————————————</p>
        </div>
    </div>

    <div class="hidden-window">
        <div class="hidden-box">
            <div class="close" onclick="close_hidden_window()">&times;</div>
            <img src="#" class="pic-contact">
        </div>
    </div>

    <div class="hidden-window-message">
        <div class="chat-container">
            <div class="back">
                <div onclick="closeLeaveMessage()">
                    &times;
                </div>
            </div>
            <div class="chat-messages"></div>
            <div class="input-container">
                <textarea class="message-input" placeholder="有什么想说的？"></textarea>
                <button class="send-button" onclick="sendMessage()">&larr;</button>
            </div>
        </div>
    </div>

    <audio id="backgroundMusic" loop>
        <source src="music/background_music.mp3" type="audio/mp3">
    </audio>

    <div class="box-message-grag" draggable="true">
        <div class="box-message-internal">
            <div class="title">
                <span class="title-content">留言</span>
                <span class="close" onclick="closeWindow()">&times;</span>
            </div>
            <div class="content-body">
                <span class="two-lins leave_message">
                    欢迎留言！
                </span>
            </div>
            
            <div class="choice">
                <div class="choice-box" onclick="openLeaveMessage()">
                    <p2>YES</p2>
                </div>
    
                <div class="choice-box" onclick="closeWindow()">
                    <p2>NO</p2>
                </div>
            </div>
        </div>
    </div>

    <div class="box-message-grag-pic" draggable="true">
        <div class="box-message-internal-pic">
            <div class="title">
                <span class="title-content">个人介绍</span>
                <span class="close" onclick="closeWindow2()">&times;</span>
            </div>

            <div class="box-avatar">
                <img src="pic/iyoahs.jpg" class="my-avatar">
            </div>
            
            <div class="choice">
                <div class="choice-box" onclick="openIntro()">
                    <p2>YES</p2>
                </div>
    
                <div class="choice-box" onclick="closeWindow2()">
                    <p2>NO</p2>
                </div>
            </div>
        </div>
    </div>

    <div style="background-color: rgba(0, 0, 0, 0.4); position: absolute;height: 100%;width: 100%; z-index: -100;"></div>

    <script src="script/index-left-slider.js"></script>
    <script src="script/index-hidden-box.js"></script>
    <script src="script/index-message-box.js"></script>
</body>
</html>